<template>
  <div class="address-container">
    <PageHeader title="地址管理" />

    <!-- 地址列表 -->
    <div v-if="!loading">
      <div v-if="addressList.length > 0" class="address-list">
        <div
          v-for="item in addressList"
          :key="item.id"
          class="address-item"
          @click="selectAddress(item)"
        >
          <div class="address-content">
            <div class="address-info">
              <div class="name-phone">
                <span class="name">{{ item.name }}</span>
                <span class="phone">{{ item.phone }}</span>
              </div>
              <div
                class="address-text"
              >{{ item.province + item.city + item.district + item.detail }}</div>
            </div>
            <div class="address-tag" v-if="item.isDefault">默认</div>
          </div>
          <div class="address-actions">
            <div class="action-btn" @click.stop="editAddress(item)">
              <van-icon name="edit" />
              <span>编辑</span>
            </div>
            <div class="action-btn" @click.stop="deleteAddress(item)">
              <van-icon name="delete" />
              <span>删除</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <van-empty description="暂无收货地址">
          <template #image>
            <van-icon name="location-o" size="60" />
          </template>
        </van-empty>
      </div>
    </div>

    <!-- 加载中 -->
    <div v-else class="loading-container">
      <van-loading color="#1989fa" />
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <van-button type="primary" block icon="plus" @click="addAddress">新增地址</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showDialog, showSuccessToast, showFailToast } from 'vant'
import PageHeader from '@/components/PageHeader.vue'
import {
  getAddressList,
  deleteAddress as deleteAddressApi,
} from '@/api/address'

const router = useRouter()
const route = useRoute()
const loading = ref(true)
const addressList = ref<any[]>([])
const isSelect = ref(false)

// 初始化
onMounted(() => {
  // 判断是否为选择地址模式
  isSelect.value = route.query.select === 'true'

  fetchAddressList()
})

// 获取地址列表
const fetchAddressList = async () => {
  loading.value = true
  try {
    const res = await getAddressList()
    if (res.code === 200 && res.data) {
      addressList.value = res.data
    } else {
      addressList.value = []
    }
  } catch (error) {
    console.error('获取地址列表失败:', error)
    addressList.value = []
  } finally {
    loading.value = false
  }
}

// 新增地址
const addAddress = () => {
  router.push('/address/edit')
}

// 编辑地址
const editAddress = (address: any) => {
  router.push({
    path: '/address/edit',
    query: { id: address.id },
  })
}

// 删除地址
const deleteAddress = async (address: any) => {
  try {
    await showDialog({
      title: '删除地址',
      message: '确定要删除该地址吗？',
      showCancelButton: true,
    })

    const res = await deleteAddressApi(address.id)
    if (res.code === 200) {
      showSuccessToast('删除成功')
      fetchAddressList()
    } else {
      showFailToast(res.message || '删除失败')
    }
  } catch (error) {
    console.error('删除地址失败:', error)
  }
}

// 选择地址
const selectAddress = (address: any) => {
  if (isSelect.value) {
    // TODO: 将选择的地址传回上一页
    router.back()
  }
}
</script>

<style scoped lang="scss">
.address-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 70px;
}

.loading-container,
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.address-list {
  padding: $padding-xs;
}

.address-item {
  background-color: $white;
  border-radius: $border-radius-md;
  margin-bottom: $padding-sm;
  overflow: hidden;

  .address-content {
    padding: $padding-md;
    display: flex;
    position: relative;

    .address-info {
      flex: 1;

      .name-phone {
        margin-bottom: $padding-xs;

        .name {
          font-size: $font-size-lg;
          font-weight: 500;
          color: $text-color;
          margin-right: $padding-md;
        }

        .phone {
          color: $text-color-light;
        }
      }

      .address-text {
        color: $text-color;
        line-height: 1.5;
      }
    }

    .address-tag {
      position: absolute;
      top: $padding-md;
      right: $padding-md;
      font-size: $font-size-xs;
      background-color: $danger-color;
      color: $white;
      padding: 2px 6px;
      border-radius: $border-radius-max;
    }
  }

  .address-actions {
    display: flex;
    border-top: 1px solid #f5f5f5;

    .action-btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: $padding-sm 0;
      color: $text-color;

      .van-icon {
        margin-right: 4px;
        font-size: 16px;
      }
    }

    .action-btn + .action-btn {
      border-left: 1px solid #f5f5f5;
    }
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $padding-md;
  background-color: $white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style> 